<template>
    <div class="head">
        <div class="city-name">
            <i class="iconfont icon-dingwei"></i>{{state.city}}
        </div>
        <div class="city-change"><i class="iconfont icon-chengshi_2"></i>切换城市</div>
    </div>
    <div class="main">
        <div class="weather-info">
            <p class="temp">10摄氏度</p>
            <p class="info">小雨</p>
            <div class="detail">
                <div class="item">
                    <i class="iconfont icon-shuidi"></i>
                    <span>湿度</span>
                    <span>45%</span>
                </div>
                <div class="item">
                    <i class="iconfont icon-fengxiang"></i>
                    <span>风向</span>
                    <span>东南风</span>
                </div>
                <div class="item">
                    <i class="iconfont icon-fengli"></i>
                    <span>风力</span>
                    <span>3级</span>
                </div>
            </div>
        </div>
        <div class="future-info"></div>
        <div class="container"></div>
    </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

const state = reactive({
  city: '北京市',
  weather: {},
  future: [],
  loading: false,
  error: null
});

onMounted(() => {
  state.loading = true;
  
  // 安全配置
  window._AMapSecurityConfig = {
    securityJsCode: "a9036640860bebb0e7986b9a0a7d392c", // 你的安全密钥
  };
  AMapLoader.load({
  key: "1c865a1ecace50a1057886f88bef0ceb",
  version: "2.0",
  plugins: ["AMap.CitySearch"],
  useAMapUI: false, // 禁用UI库（减少复杂度）
  _disableCache: true // 私有参数强制禁用缓存
}).then(AMap => {
  console.log('AMap Core Version:', AMap.version); 
  function loadPlugin(AMap, pluginName) {
  return new Promise((resolve, reject) => {
    AMap.plugin(pluginName, () => {
      setTimeout(() => { // 延迟确保插件注册完成
        resolve();
      }, 100);
    });
  });
}

// 使用方式
loadPlugin(AMap, 'AMap.CitySearch').then(() => {
  const citySearch = new AMap.CitySearch();
  // ...后续操作
  citySearch.getLocalCity(function(status, result) {
        state.loading = false;
        
        if (status === 'complete' && result.info === 'OK') {
          console.log('定位成功:', result);
          state.city = result.city;
          state.adcode = result.adcode; // 城市编码
          state.province = result.province; // 省份
        } else {
          console.error('定位失败:', result);
          state.error = result.info || '定位失败';
          // 使用默认值或提示用户
          state.city = '北京市';
        }
      });
});// 验证核心库版本
});
// 使用Promise包装插件加载

  
});
</script>

<style lang="css" scoped>
.head {
    height: 53px;
    background: #8E6FF7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    padding: 0 15px;

}

.city-name {
    font-size: 18px;
}

.city-change {
    font-size: 14px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.main {
    padding: 7px 16px 20px 16px;
}

.weather-info {
    width: 100%;
    background: linear-gradient(146deg, rgba(142.111.247.0.1), 0%, rgba(142, 111, 247, 0.00) 100%);
    border-radius: 16px 16px 16px 16px;
    padding: 24px;
    box-sizing: border-box;
}

.temp {
    font-family: Roboto, Roboto;
    font-weight: 300;
    color: #000;
    line-height: 60px;
    text-align: center;

}

.info {
    font-family: Roboto, Roboto;
    font-weight: 400;
    font-size: 14px;
    color: #4B5563;
    line-height: 21px;
    text-align: center;
}

.detail {
    display: flex;
    margin-top: 24px;
}

.item {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.item i {
    color: #8E6FF7;
}

.item span:nth-child(2) {
    color: #4B5563;
    font-size: 14px;
}

.item span:nth-child(3) {
    color: #000;
    font-size: 16px;
}
</style>